<template>
  <div class="used-outer">
    <!-- tabs -->
    <div class="tabs">
      <div
        v-for="(item, idx) in types" :key="item.value" class="tab"
        :class="{active: idx == current}" @click="handleClickTap(idx)"
      >
        {{ item.label }}
      </div>
    </div>

    <!-- 最近使用 -->
    <div v-if="loading" class="loading">
      <van-loading vertical>
        加载中...
      </van-loading>
    </div>
    <template v-else>
      <div v-if="current===0" :class="commonList.length>0?'used-list':'used-lists'">
        <div class="used-style">
          <div class="used-item">
            <used-item v-for="item in commonList" :key="item.id" class="item-style" :menu="item" :current="current" />
          </div>
        </div>
      </div>
      <div v-if="current===1" class="used-list">
        <div class="used-style">
          <div class="used-item">
            <used-item v-for="item in staffList" :key="item.id" class="item-style" :menu="item" :current="current" />
          </div>
        </div>
        <!-- <uni-load-more :status="status" /> -->
      </div>
      <van-empty v-else description="暂无数据" />
    </template>
  </div>
</template>

<script>
import UsedItem from './used-item.vue'
import { getCustomerMenu } from '@/apis/customer.js'

export default {
  components: { UsedItem },
  props: {
    types: {
      type: Array,
      default: () => [],
    },
    commonList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      current: 0,
      loading: false,
      status: 'more',
      pageNo: 1,
      finished: false,
      staffList: [],
    }
  },
  mounted() {
    this.handleClickTap(0)
  },
  methods: {
    handleClickTap(idx) {
      this.pageNo = 1
      this.current = idx
      this.finished = false
      if (idx === 1) {
        this.getAllStaff()
      }
    },
    async getAllStaff() {
      const res = await getCustomerMenu()
      res.forEach((item, index) => {
        if (item.name === '客户信息管理') {
          this.staffList = [
            { formName: '客户信息管理', logo: '{\'icon\': \'\', \'background\': \'#1e90ff\'}' },
          ]
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.used-outer {
	margin-top: 15px;
	.tabs {
		display: flex;
		align-items: center;
		column-gap: 20px;
		padding:0 15px;
		.tab {
			font-size: 16px;
			font-weight: 400;
			color: #000000;
			line-height: 16px;
			margin-bottom: 17px;
			position: relative;
			transition: all 250ms;
			&::after {
				content: '';
				display: block;
				position: absolute;
				width: 0px;
				height: 3px;
				left: 50%;
				bottom: -7px;
				transform: translateX(-50%);
				background: #000;
				// background: #739ECA;
				border-radius: 1px;
				transition: all 250ms;
			}
			&.active {
				font-weight: 600;
				&::after {
					width: 16px;
				}
			}
		}
	}
	.used-lists{
		background: #fff;
	}
	.used-list{
		background: #f2f1f6;
		width: 100%;
		display: flex;
		flex-flow: column;
		align-items: center;
		.used-style{
			margin-top: 10px;
			margin-bottom: 10px;
			width: 95%;
			border-radius: 6rpx;
			.recently-used{
				background: #fff;
				padding: 10px 0px 10px 10px;
				font-weight: 500;
				font-size: 16px;
			}
			.used-item{
				display: flex;
				flex-flow: row wrap;
				align-content:flex-start;
				background: #fff;

				used-item{
					background:#fff;
					width: 78px;
					height: 78px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					border-radius: 4px;
				}
			}
			uni-load-more{
				width: 100%;
				background: #fff;
				margin-top: 10px;
			}
		}
	}
	.used-customer{
		background: #fff !important;
	}
	.loading {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30px;
	}
}
</style>
